<template>
  <div class="folder-tree">
    <a-menu
      mode="inline"
      :selectedKeys="selectedKeys"
      :open-keys="openKeys"
      style="width: 256px"
      :inlineIndent="15"
      @openChange="onOpenChange"
    >
      <a-sub-menu :key="folder.name" v-for="folder in folders">
        <!-- folder -->
        <span v-if="folder.type == 'folder'" slot="title">
          <a-icon v-if="folder.isOpen" type="folder-open" />
          <a-icon v-else type="folder" />

          <span class="title">{{ folder.name }}</span>
          <div class="actions">
            <a-tooltip title="add folder">
              <a-button
                type="link"
                class="editfnname"
                @click.stop="addFolder(folder)"
              >
                <a-icon type="folder-add" />
              </a-button>
            </a-tooltip>
          </div>
        </span>

        <!-- child -->
        <template v-for="(child, childIndex) in folder.childs">
          <!-- js -->
          <a-menu-item
            v-if="child.type == 'js'"
            :key="child.modulePath"
            @click="editJS(child)"
          >
            <a-tooltip v-if="child.isEdit" :title="child.editUserName">
              <a-avatar class="avatar user-avatar" :size="20">
                {{ child.editUserName }}
              </a-avatar>
            </a-tooltip>
            <a-avatar v-else class="avatar" :size="20" icon="file-text" />

            <span class="title">{{ child.name + ".js" }}</span>

            <!-- <div class="actions">
                  <a-button
                    type="link"
                    class="addfile"
                    @click.stop="showDeleteConfirm(child, childIndex, folder)"
                  >
                    <a-icon type="delete" />
                  </a-button>
                </div> -->
          </a-menu-item>

          <!-- folder -->
          <a-sub-menu v-if="child.type == 'folder'" :key="child.name">
            <span slot="title">
              <a-icon v-if="child.isOpen" type="folder-open" />
              <a-icon v-else type="folder" />
              <span class="title">{{ child.name }}</span>

              <div class="actions">
                <a-button
                  type="link"
                  class="addfile"
                  v-if="child.childs.length == 0"
                  @click.stop="showDeleteConfirm(child, childIndex, folder)"
                >
                  <a-icon type="delete" />
                </a-button>

                <a-tooltip title="add script">
                  <a-button
                    type="link"
                    class="addfile"
                    @click.stop="addFile(child)"
                  >
                    <a-icon type="file-add" />
                  </a-button>
                </a-tooltip>
              </div>
            </span>
            <!-- 二级目录内容 -->
            <a-menu-item
              v-for="(_child, _childIndex) in child.childs"
              :key="_child.modulePath"
              :class="
                _child.isNew
                  ? ['color-add', 'ant-menu-submenu-title']
                  : _child.isUpdate
                  ? ['color-edit', 'ant-menu-submenu-title']
                  : ['ant-menu-submenu-title']
              "
              @click="editJS(_child)"
            >
              <a-tooltip v-if="_child.isEdit" :title="_child.editUserName">
                <a-avatar class="avatar user-avatar" :size="20">
                  {{ _child.editUserName }}
                </a-avatar>
              </a-tooltip>
              <a-avatar v-else class="avatar" :size="20" icon="file-text" />
              <!-- <a-avatar v-else>
                <a-icon type="file-text" />
              </a-avatar> -->
              <!-- <a-icon v-else type="file-text" /> -->

              {{ _child.name + ".js" }}

              <div
                class="actions"
                v-if="!_child.isReadOnly"
                style="margin-right: -30px;"
              >
                <a-tooltip title="删除模块">
                  <a-button
                    type="link"
                    class="addfile"
                    @click.stop="showDeleteConfirm(_child, _childIndex, child)"
                  >
                    <a-icon type="delete" />
                  </a-button>
                </a-tooltip>
                <a-tooltip title="测试运行 (F5)">
                  <a-button
                    type="link"
                    class="editfnname"
                    @click.stop="runfunction(_child)"
                  >
                    <a-icon type="caret-right" />
                  </a-button>
                </a-tooltip>
              </div>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedKeys: [],
      openKeys: ["CloudFunctions"],
      rootSubmenuKeys: ["rootSubmenuKeys"]
    };
  },
  watch: {
    selectFiled: function(value) {
      if (!value) {
        return;
      }
      var arr = value.split("/");
      if (arr.length > 1) {
        this.openKeys = ["CloudFunctions", arr[0]];
      } else {
        this.openKeys = ["CloudFunctions"];
      }
      this.selectedKeys = [value];
    }
  },
  props: ["folders", "selectFiled"],
  methods: {
    onOpenChange(openKeys) {
      for (let index = 0; index < this.folders.length; index++) {
        const element = this.folders[index];
        element.isOpen = openKeys.indexOf(element.name) > -1;
        for (let index2 = 0; index2 < element.childs.length; index2++) {
          const element2 = element.childs[index2];
          element2.isOpen = openKeys.indexOf(element2.name) > -1;
        }
      }

      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    addFolder(folder) {
      this.$emit("addFolder", folder);
    },
    editJS(child) {
      this.$emit("editJS", child);
    },
    showDeleteConfirm(child, childIndex, folder) {
      this.$emit("delete", { child, childIndex, folder });
    },
    addFile(child) {
      this.$emit("addfile", child);
    },
    runfunction(e) {
      this.$emit("run", e);
    }
  }
};
</script>

<style>
.avatar {
  margin: -2px 3px 0 0px;
}
.user-avatar {
  background-color: #87d068;
}
.folder-tree .ant-avatar .anticon {
  margin-right: 0px;
  font-size: 12px;
}
.folder-tree .title {
  font-size: 16px;
}
</style>
